<?php 
  require_once '../functions.php';

  xiu_get_current_user();  

?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Comments &laquo; Admin</title>
  <link rel="stylesheet" href="/static/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="/static/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="/static/assets/vendors/nprogress/nprogress.css">
  <link rel="stylesheet" href="/static/assets/css/admin.css">
  <script src="/static/assets/vendors/nprogress/nprogress.js"></script>
</head>
<body>
  <script>NProgress.start()</script>

  <div class="main">
    <?php include 'inc/navbar.php' ?>
    <div class="container-fluid">
      <div class="page-title">
        <h1>所有评论</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <div class="page-action">
        <!-- show when multiple checked -->
        <div class="btn-batch" style="display: none">
          <button class="btn btn-info btn-sm">批量批准</button>
          <button class="btn btn-warning btn-sm">批量拒绝</button>
          <button class="btn btn-danger btn-sm">批量删除</button>
        </div>
        <ul class="pagination pagination-sm pull-right">
          <li><a href="#">上一页</a></li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">下一页</a></li>
        </ul>
      </div>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th class="text-center" width="40"><input type="checkbox"></th>
            <th>作者</th>
            <th>评论</th>
            <th>评论在</th>
            <th>提交于</th>
            <th>状态</th>
            <th class="text-center" width="160">操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
  
  <?php $current_page='comments'; ?>
  <?php include 'inc/sidebar.php'; ?>

  <script src="/static/assets/vendors/jquery/jquery.js"></script>
  <script src="/static/assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script src="/static/assets/vendors/jsrender/jsrender.js"></script>
  <script src="/static/assets/vendors/twbs-pagination/jquery.twbsPagination.js"></script>
  <script id="comment_tmpl" type="text/x-jsrender">
  {{for data}}
  <tr{{if status == 'held' }} class="waring" {{else status == "rejected"}} class="danger" {{/if}} data-id={{:id}}>
            <td class="text-center"><input type="checkbox"></td>
            <td>{{:author}}</td>
            <td>{{:content}}</td>
            <td>《{{:post_title}}》</td>
            <td>{{:created}}</td>
            <td>{{if status == 'held' }} 待审 {{else status == "rejected"}} 拒绝  {{else status == "approved"}} 准许 {{/if}} </td>
            <td class="text-center">
             {{if status == 'held'}}
              <a href="javascript:;" class="btn btn-info btn-xs btn-edit" data-status="approved">批准</a>
              <a href="javascript:;" class="btn btn-info btn-xs btn-edit" data-status="rejected">拒绝</a>
             {{/if}}
              <a href="javascript:;" class="btn btn-danger btn-xs btn-delete">删除</a>
            </td>
          </tr>
  {{/for}}
  </script>
  <script>
    $(function($){


      $(document).ajaxStart(function() {
        NProgress.start();
      });
      $(document).ajaxStop(function() {
        NProgress.done();
      }); // end document

      // ==========================================
      // 获取所有数据
     var $tbody = $('tbody');
     var $tmpl = $('#comment_tmpl');
     var $pagination = $('.pagination');
     var $btnBatch = $('.btn-batch');

     //一页显示的数据
     var size = 20;
     //当前页码
     var currentPage = parseInt(window.localStorage.getItem('last_comments_page')) || 1;

     //存储选中项id
     var checkedItems = [];

    //=============================================
     function loadData () {
      $('tbody').fadeOut();
      $.get('/admin/comment-list.php',{ p: currentPage, s: size }, function (res){
        //模板渲染数据
        var html = $tmpl.render(res);
        $tbody.html(html);
        // $pagination.twbsPagination('destroy');
      });
      $('tbody').fadeIn();
     };//end loadData

     //发送异步请求获取数据
     $.get('/admin/comment-list.php',{ p: currentPage, s: size}, function (res) {
       var html = $tmpl.render(res);
       $tbody.html(html);

       //分页组件
      
      $pagination.twbsPagination({
          first: '&laquo;',
          prev: '上一页',
          next: '下一页',
          last: '&raquo;',
          startPage: currentPage,
          totalPages: Math.ceil(res.total_count / size),
          initiateStartPageClick: false,
          onPageClick: function (e,page) {
            currentPage = page;
            window.localStorage.setItem('last_comments_page',currentPage);
            loadData();
          }//end onPageClick
      });//end 分页组件

     });//end get

     //=============================================
    //删除评论
    $tbody.on('click','.btn-delete',function () {
      var $tr = $(this).parent().parent();
      var id =parseInt($tr.data('id'));
      $.get('/admin/comment-delete.php',{ id: id },function (res) {
        res.success && loadData();
      })//end get
    });//end 删除

    //修改评论状态
    $tbody.on('click','.btn-edit', function () {
      var id = parseInt($(this).parent().parent().data('id'));
      var status = $(this).data('status');
      $.post('/admin/comment-status.php?id=' + id,{ status: status }, function (res) {
        res.success && loadData();
      });//end post
    }); //end 修改

    //批量操作按钮

    $tbody.on('change','td > input[type=checkbox]', function () {
      var id = parseInt($(this).parent().parent().data('id'));

      if($(this).prop('checked')){
        checkedItems.push(id);
      }else{
        checkedItems.splice(checkedItems.indexOf(id), 1);
      }
      checkedItems.length ? $btnBatch.fadeIn() : $btnBatch.fadeOut();
    });

    //全选/全不选
    $('th > input[type=checkbox]').on('change',function () {
      var checked = $(this).prop('checked');
      $('td > input[type=checkbox]').prop('checked',checked).trigger('change');
    });

    //批量操作
    $btnBatch
    //批准
    .on('click', '.btn-info' , function (){
      $.post('/admin/comment-status.php?id=' + checkedItems.join(','), { status: 'approved' }, function (res) {
        res.success && loadData();

      })
    })
    //拒绝
    .on('click', '.btn-warning' , function (){
      $.post('/admin/comment-status.php?id=' + checkedItems.join(','), { status: 'rejected' }, function (res) {
        res.success && loadData();
      })
    })
    //删除
    
    .on('click', '.btn-danger' , function (){
      $.get('/admin/comment-delete.php',  { id: checkedItems.join(',') }, function (res) {
        if(res){
          loadData();
        }
      })
    })

    // bug:删除最后一页数据时分页组件不更新  ===== 未修正  =====
    //治标的方法
    window.localStorage.clear();
  });//end 入口
  </script>
  <script>NProgress.done()</script>
</body>
</html>
